<template>
  <div>
    基础功能 —— 表和字段
    <ctl-column/>
    <!--建表语句——mysql 、 websql
    各种实体类——websql、列表
    各种meta——表单、列表、查询、分页-->
    <el-tabs tab-position="left" style="height: 700px;">
      <el-tab-pane label="按钮"> <ctl-button/></el-tab-pane>
      <el-tab-pane label="MySQL"> <ctl-mysql/> </el-tab-pane>
      <el-tab-pane label="查询"> <ctl-find/> </el-tab-pane>
      <el-tab-pane label="表单"> <ctl-form/> </el-tab-pane>
      <el-tab-pane label="列表"> <ctl-grid/> </el-tab-pane>
      <el-tab-pane label="model"> <ctl-model/> </el-tab-pane>
      <el-tab-pane label="API"> </el-tab-pane>
      <el-tab-pane label="websql"> <ctl-websql/> </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { ref } from 'vue'
// eslint-disable-next-line import/no-absolute-path
import VueDS from '/nf-state'

</script>

<script setup>
import ctlColumn from './column-div.vue'

import ctlModel from './meta-model.vue'
import ctlForm from './meta-form.vue'
import ctlFind from './meta-find.vue'
import ctlGrid from './meta-grid.vue'
import ctlWebsql from './meta-websql.vue'
import ctlMysql from './db-mysql.vue'
import ctlButton from './meta-button.vue'

const v = ref(2)

// 注册局部状态，保存表名、字段信息，
// 依据字段信息，生成 表单、查询、列表、SQL建表语句等信息

const { reg } = VueDS.useStore()
const helpDataBaseMeta = reg.helpDataBaseMeta()

</script>
